<template>
	<div class="zco-im" id="zco-im" ref="zcoIM">
		<div v-if="type === 'mobile'" class="zco-container-mobile">
			<MobileTitle />
			<ChatMessage :isMobile="isMobile" ref="ChatMessage" @preview="handlePreview" />
			<MobileFooter ref="MobileFooter" />
		</div>

		<div v-else class="zco-container-web">
			<WebTitle v-if="!isMobile" />
			<ChatMessage :isMobile="isMobile" ref="ChatMessage" @preview="handlePreview" />
			<MobileFooter v-if="isMobile" ref="MobileFooter" />
			<WebFooter v-else :hideImageButton="hideImageButton" :hideFileButton="hideFileButton" :showKbButton="showKbButton" />
		</div>
		<ImgPreviewMobile :imgUrl="previewImagesURL" v-if="previewImagesURL && isMobile" @colseImgPreView="colseImgPreView" />
		<ImgPreview :imgUrl="previewImagesURL" v-if="previewImagesURL && !isMobile" @colseImgPreView="colseImgPreView" />
		<PdfPreview :pdfUrl="previewPdfURL" v-if="previewPdfURL" @colsePdfPreView="colsePdfPreView" />
		<RichText :richText="previewRichText" v-if="previewRichText" @colseRichTextPreView="colseRichTextPreView" />
		<VideoPreviewMobile :videoUrl="previewVideoURL" v-if="previewVideoURL && isMobile" @close="colseVideoPreView" />
		<VideoPreview :videoUrl="previewVideoURL" v-if="previewVideoURL && !isMobile" @close="colseVideoPreView" />
		<LinkPreview :link="previewLinkURL" v-if="previewLinkURL" @close="colseLinkPreView" />
	</div>
</template>

<script>
import WebTitle from '@/components/Web/WebTitle.vue';
import ChatMessage from '@/components/ChatMessage/index.vue';
import WebFooter from '@/components/Web/WebFooter.vue';
import MobileTitle from '@/components/Mobile/MobileTitle.vue';
import MobileFooter from '@/components/Mobile/MobileFooter.vue';
import ZcoIM from '../index';
import { isMobile } from '@/utils/util';
import ImgPreview from '@/components/Preview/ImgPreview.vue';
import ImgPreviewMobile from '@/components/Preview/ImgPreviewMobile.vue';
import PdfPreview from '@/components/Preview/PdfPreview.vue';
import RichText from '@/components/Preview/RichText.vue';
import VideoPreview from '@/components/Preview/VideoPreview.vue';
import VideoPreviewMobile from '@/components/Preview/VideoPreviewMobile.vue';
import LinkPreview from '@/components/Preview/LinkPreview.vue';

export default {
	// eslint-disable-next-line vue/no-unused-components
	components: { WebTitle, ChatMessage, WebFooter, MobileTitle, MobileFooter, ImgPreview, ImgPreviewMobile, PdfPreview, RichText, VideoPreview, VideoPreviewMobile, LinkPreview },
	data() {
		return {
			width: ZcoIM.width,
			height: ZcoIM.height,
			type: ZcoIM.type,
			nowDeviceMode: '',
			orientation: 'Portrait', // 当前设备的方向,默认竖屏
			hideImageButton: ZcoIM.hideImageButton,
			hideFileButton: ZcoIM.hideFileButton,
			showKbButton: ZcoIM.showKbButton,
			isMobile: isMobile(),
			previewImagesURL: null, //
			previewPdfURL: null,
			previewRichText: null,
			previewVideoURL: '', // 视频预览地址
			previewLinkURL: '' // 链接预览地址
		};
	},
	computed: {},
	watch: {},
	methods: {
		// 监听页面size变化
		onResize() {
			console.log('zcom-im-窗口变化', window.innerWidth, window.innerHeight);
			this.isLandscapeMode = window.innerWidth > window.innerHeight;
			this.orientation = window.innerWidth > window.innerHeight ? 'Landscape' : 'Portrait';
			if (this.isLandscapeMode) {
				this.nowDeviceMode = this.orientation + '-Landscape';
			} else {
				this.nowDeviceMode = this.orientation + '-Portrait';
			}
			console.log('zcom-im-isLandscapeMode', this.isLandscapeMode, this.orientation, this.nowDeviceMode);
			if (this.type === 'mobile') {
				ZcoIM.setChatMessageHeight(window.innerHeight);
			}
		},
		onTouchStart(event) {
			if (['TEXTAREA', 'BUTTON'].includes(event.target.tagName)) return;
			if (this.$refs.MobileFooter.showTools || this.$refs.MobileFooter.showEmoji) return;
			// 隐藏键盘
			const inputNode = document.getElementById('widget-message-text');
			if (inputNode) {
				inputNode.blur();
			}
			if (this.$refs.MobileFooter) {
				this.$refs.MobileFooter.hideTools();
			}
		},
		updateOptions() {
			this.hideImageButton = ZcoIM.hideImageButton;
			this.hideFileButton = ZcoIM.hideFileButton;
			this.showKbButton = ZcoIM.showKbButton;
			console.log('ZcoIM.hideImageButton', ZcoIM.hideImageButton);
		},
		colseImgPreView() {
			this.previewImagesURL = null;
		},
		colsePdfPreView() {
			this.previewPdfURL = null;
		},
		colseRichTextPreView() {
			this.previewRichText = null;
		},
		colseVideoPreView() {
			this.previewVideoURL = null;
		},
		colseLinkPreView() {
			this.previewLinkURL = null;
		},
		handlePreview(data) {
			console.log('handlePreview', data);
			if (data.type === 'img') {
				this.previewImagesURL = data.url;
			} else if (data.type === 'pdf') {
				this.previewPdfURL = data.url;
			} else if (data.type === 'richText') {
				this.previewRichText = data.url;
			} else if (data.type === 'video') {
				this.previewVideoURL = data.url;
			} else if (data.type === 'link') {
				this.previewLinkURL = data.url;
			}
		}
	},
	mounted() {
		console.warn('zco-ZcoIM.type :', this.type, new Date());
		let ZcoIMContainer = document.getElementById('zco-im');
		ZcoIMContainer.style.width = this.width + 'px';
		ZcoIMContainer.style.height = this.height + 'px';
		ZcoIM.setChatMessageHeight(ZcoIM.height);
		// 解决苹果手机 Safari 浏览器页面底部未覆盖完
		window.addEventListener('resize', this.onResize);
		this.$nextTick(() => {
			this.onResize();
		});
		if (this.type === 'mobile') {
			// const dom = document.getElementById('chat-message');
			// const dom = this.$refs.ChatMessage.$el
			this.$refs.zcoIM.addEventListener('touchstart', this.onTouchStart, { passive: false });
			this.$refs.zcoIM.addEventListener('touchmove', this.onTouchStart, { passive: false });
		}
	},
	beforeDestroy() {
		// 移除绑定的onResize事件监听
		window.removeEventListener('resize', this.onResize);
		if (this.type === 'mobile') {
			// const dom = document.getElementById('chat-message');
			// const dom = this.$refs.ChatMessage.$el
			this.$refs.zcoIM.removeEventListener('touchstart', this.onTouchStart, { passive: false });
			this.$refs.zcoIM.removeEventListener('touchmove', this.onTouchStart, { passive: false });
		}
	}
};
</script>

<style>
.zco-container-web {
	width: 100%;
	height: 100%;
	position: relative;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	/* margin-left: 100px; */
}
.emoji-container-bg {
	background: #ffffff;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
	border-radius: 2px;
}
.zco-im {
	width: 100%;
	height: 100%;
}
.zco-container-mobile {
	width: 100%;
	height: 100%;
	position: relative;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
}
</style>
